<template>
  <view class="statistics-card pt-12 px-16 br-8">
    <text class="fz-14 linh-20 color-white">{{ title }}</text>
    <view class="data-items">
      <DataItem
        v-for="(item, index) in datas"
        :data="item"
        :key="index"
        :width="itemWidth"
      ></DataItem>
    </view>
  </view>
</template>
<script setup lang="ts">
  import type { PropType } from 'vue';
  import type { IDataItem } from './DataItem.vue';
  import DataItem from './DataItem.vue';
  /**统计总览卡片组件 */
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    datas: {
      type: Array as PropType<IDataItem[]>,
      default: () => [],
    },
    itemWidth: {
      type: String,
      default: '',
    },
  });
</script>
<style lang="scss" scoped>
  .statistics-card {
    background-color: #2878ff;
    .data-items {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
    }
  }
</style>
